<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .radio_text {
            position: absolute;
            top: 10px;
            width: 25px;
        }

        .demo--label {
            margin: 20px 20px 0 0;
            display: inline-block
        }

        .m_radio {
            display: none
        }

        .m_radioInput {
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 100%;
            display: inline-block;
            height: 16px;
            margin-right: 10px;
            margin-top: -1px;
            vertical-align: middle;
            width: 16px;
            line-height: 1
        }

        .m_radio:checked + .m_radioInput:after {
            background-color: #57ad68;
            border-radius: 100%;
            content: "";
            display: inline-block;
            height: 12px;
            margin: 2px;
            width: 12px
        }

        .demo--checkbox.m_radioInput, .m_radio:checked + .demo--checkbox.m_radioInput:after {
            border-radius: 0
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box-body">
        <table id="mainDataTables" class="table table-bordered table-striped" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>序号</th>
                <th>类型</th>
                <th>规则名称</th>
                <th>规则简介</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<!--
-->
<!--添加编辑模态框-->
<div id="modal-ruleGroup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="label-ruleGroup"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 407px;">
        <div class="modal-content">
            <form id="form-ruleGroup" name="form-ruleGroup" class="form-horizontal" role="form" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="$.clearModal($('#form-ruleGroup'), $('#modal-ruleGroup'))">
                        <span aria-hidden="true">&times;</span></button>
                    <b class="modal-title" id="label-ruleGroup"></b>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="ruleGroupId" id="ruleGroupId">
                    <div class="form-group" id="ruleGroupTypeDiv">
                        <label for="ruleGroupType" class="col-sm-3 control-label ">单位类型</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="ruleGroupType" name="ruleGroupType">
                                <option value="-1">通用</option>
                                <option value="2">信号灯</option>
                                <option value="3">信号机</option>
                                <option value="4">太阳能</option>
                                <option value="5">限高杆</option>
                                <option value="8">监控箱</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ruleGroupName" class="col-sm-3 control-label ">规则名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="ruleGroupName" name="ruleGroupName"
                                   placeholder="规则名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ruleCreateTime" class="col-sm-3 control-label ">创建时间</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control  " id="ruleCreateTime" name="ruleCreateTime"
                                   placeholder="创建时间">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="ruleGroupRemarks" class="col-sm-3 control-label ">规则介绍</label>
                        <div class="col-sm-9">
                            <textarea type="text" style="height: 200px" class="form-control" id="ruleGroupRemarks"
                                      name="ruleGroupRemarks"
                                      placeholder="规则介绍"></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning pull-left btn-flat" data-dismiss="modal"
                            onclick="$.clearModal($('#form-ruleGroup'), $('#modal-ruleGroup'))"><i
                            class="fa fa-trash-o"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary btn-flat"><i class="fa fa-save"></i> 保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--规则展示模态框-->
<div class="modal fade" id="rule-modal" tabindex="-1" role="dialog"
     aria-labelledby="mapModalLabel" aria-hidden="true">
    <input type="hidden" id="modal_ruleModel">
    <div class="modal-dialog " style="width: 80%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        onclick="$.closeRuleModal()">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="mapModalLabel">规则列表</h4>

            </div>
            <div class="modal-body" style="max-height: 550px;overflow: auto;">
                <div class="row">
                    <div class="col-md-6">
                        <div class="col-md-12 text-center" style="font-size: 18px;margin-bottom: 20px;">
                            <label>紧急规则</label></div>
                        <div class="col-md-12">
                            <table id="redRuleDt"
                                   class="table table-striped table-bordered"
                                   cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>
                                        <input onchange="$.checkChange1()" type="checkbox" id="batchCheck1">
                                    </th>
                                    <th>报警</th>
                                    <th>等级</th>
                                    <th>0/1</th>
                                    <th>规则</th>
                                    <th>触发状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="col-md-12 text-center" style="font-size: 18px;margin-bottom: 20px;">
                            <label>常规规则</label></div>
                        <div class="col-md-12">
                            <table id="blueRuleDt"
                                   class="table table-striped table-bordered"
                                   cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>
                                        <input onchange="$.checkChange2()" type="checkbox" id="batchCheck2">
                                    </th>
                                    <th>报警信息</th>
                                    <th>规则</th>
                                    <th>触发状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-flat"
                        onclick="$.closeRuleModal()">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    关闭
                </button>
            </div>
            </form>
        </div>
    </div>
</div>



<!--添加编辑模态框 紧急规则-->
<div id="red_rule_edit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="label-red_rule_edit"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 407px;">
        <div class="modal-content">
            <form id="form-red_rule_edit" name="form-red_rule_edit" class="form-horizontal" role="form" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="$.clearModal($('#form-red_rule_edit'), $('#red_rule_edit'))">
                        <span aria-hidden="true">&times;</span></button>
                    <b class="modal-title" id="label-red_rule_edit">紧急规则设定</b>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="redRuleId" id="redRuleId">
                    <input type="hidden" name="redRuleFlag" id="redRuleFlag">
                    <div class="form-group">
                        <label for="redRuleLevel" class="col-sm-3 control-label ">等级</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="redRuleLevel" name="redRuleLevel"
                                   placeholder="等级">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alarmContent" class="col-sm-3 control-label ">状态0</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control  " id="alarmContent"
                                   placeholder="报警提示">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="recoveryContent" class="col-sm-3 control-label ">状态1</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control  " id="recoveryContent"
                                   placeholder="恢复提示">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="redRuleContent" class="col-sm-3 control-label ">规则</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" readonly id="redRuleContent" name="redRuleContent2"
                                   placeholder="规则">
                        </div>
                        <div class="col-sm-1">
                            <button type="button" id="redRuleFactory" class="btn btn-default btn-xs btn-flat"
                                    style="height: 30px"><i class="fa fa-cog"></i></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="recoveryContent" class="col-sm-3 control-label ">类型</label>
                        <div class="col-sm-9">
                            <select type="text" class="form-control  " id="redRuleTag" name="redRuleTag">
                            <option value="0">常规</option>
                            <option value="1">特殊</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning pull-left btn-flat" data-dismiss="modal"
                            onclick="$.clearModal($('#form-red_rule_edit'), $('#red_rule_edit'))"><i
                            class="fa fa-trash-o"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary btn-flat"><i class="fa fa-save"></i> 保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--添加编辑模态框 紧急规则-->
<div id="blue_rule_edit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="label-blue_rule_edit"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 407px;">
        <div class="modal-content">
            <form id="form-blue_rule_edit" name="form-blue_rule_edit" class="form-horizontal" role="form" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="$.clearModal($('#form-blue_rule_edit'), $('#blue_rule_edit'))">
                        <span aria-hidden="true">&times;</span></button>
                    <b class="modal-title" id="label-blue_rule_edit">常规规则设定</b>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="blueRuleId" id="blueRuleId">
                    <input type="hidden" name="blueRuleFlag" id="blueRuleFlag">
                    <input type="hidden" name="blueRuleLevel" id="blueRuleLevel">
                    <div class="form-group">
                        <label for="blueRuleName" class="col-sm-3 control-label ">报警提示</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="blueRuleName" name="blueRuleName"
                                   placeholder="报警提示">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="blueRuleContent" class="col-sm-3 control-label ">规则</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control  " id="blueRuleContent" name="blueRuleContent2"
                                   placeholder="规则">
                        </div>
                        <div class="col-sm-1">
                            <button type="button" id="blueRuleFactory" class="btn btn-default btn-xs btn-flat"
                                    style="height: 30px"><i class="fa fa-cog"></i></button>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning pull-left btn-flat" data-dismiss="modal"
                            onclick="$.clearModal($('#form-blue_rule_edit'), $('#blue_rule_edit'))"><i
                            class="fa fa-trash-o"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary btn-flat"><i class="fa fa-save"></i> 保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--添加编辑模态框 紧急规则-->
<div id="red_rule_factory" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="label-red_rule_factory"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 450px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <b class="modal-title" id="label-red_rule_factory">紧急规则</b>
                <select class="form-control " style="width: 140px;display: inline-block;" id="redRuleType">
                    <option value="1">断电规则(1)</option>
                    <option value="2">冲突规则(2)</option>
                </select>
            </div>
            <h4 style="text-align: center;">端口顺序与报文方向一致与机身刻字方向一致</h4>
            <div style="text-align: center;">
                <img  style="width: 80%;" src="http://hldoss.oss-cn-hangzhou.aliyuncs.com/image/83/2018610/201669992390.png">
            </div>
            <div class="modal-body">

                <div id="red100rule" style="display: none">
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="1" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">0</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="2" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">1</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="3" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">2</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="4" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">3</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="5" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">4</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="6" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">5</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="7" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">6</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="8" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">7</span>
                    </label>
                </div>
                <div id="red200rule" style="display: none">
                    <label class="demo--label">
                        <input class="m_radio" type="checkbox" value="1" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">0</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="checkbox" value="2" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">1</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="checkbox" value="3" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">2</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="checkbox" value="4" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">3</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="checkbox" value="5" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">4</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="checkbox" value="6" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">5</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="checkbox" value="7" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">6</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="checkbox" value="8" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">7</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning pull-left btn-flat" data-dismiss="modal"
                        onclick="$('#red_rule_factory').modal('hide')"><i
                        class="fa fa-trash-o"></i> 取消
                </button>
                <button type="submit" class="btn btn-primary btn-flat" id="saveRuleBtn"><i class="fa fa-save"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>
<!--添加编辑模态框 紧急规则-->
<div id="blue_rule_factory" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="label-blue_rule_factory"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 450px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <b class="modal-title" id="label-blue_rule_factory">常规规则设定</b>
                <select class="form-control " style="width: 140px;display: inline-block;" id="blueRuleType">
                    <option value="0">常亮规则</option>
                    <option value="1">无电规则</option>
                </select>
            </div>
            <div class="modal-body">
                <div id="blueRule">
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="1" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">1</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="2" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">2</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="3" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">3</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="4" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">4</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="5" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">5</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="6" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">6</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="7" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">7</span>
                    </label>
                    <label class="demo--label">
                        <input class="m_radio" type="radio" value="8" name="demo-checkbox1">
                        <span class="demo--checkbox m_radioInput"></span>
                        <span class="radio_text">8</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning pull-left btn-flat" data-dismiss="modal"
                        onclick="$('#blue_rule_factory').modal('hide')"><i
                        class="fa fa-trash-o"></i> 取消
                </button>
                <button class="btn btn-primary btn-flat" id="saveBlueRuleBtn"><i class="fa fa-save"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>


</body>
<script src="management/ruleGroupManage.js"></script>
</html>